/*
Theme Name: B&B - Bed&Breakfast Responsive site template
Theme URI: http://www.ansonika.com/bed-and-breakfast/
Description:  Bed&Breakfast Responsive site template is created by <a href="http://www.ansonika.com">Ansonika</a>.
Version: 1.0.0
Author: Ansonika
Author URI: http://themeforest.net/user/Ansonika/

CSS STRUCTURE:

1. SITE STRUCTURE
3.  CONTENT
3. MISC
4. MEDIA QUERIES (responsive styles)

--------------------------------------------------------*/

/*  1.SITE STRUCTURE
================================================== */

/*Menu*/
header {background: url(../images/top-bg.png) repeat-x left bottom; width: 100%; position: fixed; z-index: 1000; padding: 5px 0 15px 0; top:0; left:0;}
#top-nav ul { padding-top:10px; float:right; position:relative}
#top-nav ul li { display: inline; margin: 0 15px 0 0;}
#top-nav a {font-size: 14px; color: #505050; text-decoration: none; font-weight:700;}
#top-nav a:hover { color: #39bad2; transition: color 0.5s;}
#top-nav ul .current a{ color: #505050;}

#lang ul{float: right; }	
#lang ul li a{ float:left; width:18px; height:18px; margin-right:5px; display:block; text-indent:-9999px;}	
#lang ul li#french a {background:url(../images/fr-flag.png) no-repeat 0 0;}
#lang ul li#german a {background:url(../images/de-flag.png) no-repeat 0 0;}

/* Button Responsive Menu*/
.btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin:  0px 0 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#555; border-radius: 4px;}
.icon-bar {display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;border-radius: 1px;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}
.show{display:block!important}

/*  2. CONTENT
================================================== */

#rooms, #contact,#activities, #about {background: #fff;}
#rooms, #contact, #about{ padding-bottom:50px;}
#activities { padding-bottom:40px;}

/*Homepage section*/
#homepage .container {height: 100%;}
#homepage { position: relative; overflow: hidden; height: 100%; margin:0; background: url(../images/slider/bg-opacity-50.png) repeat;}
#logo-in { margin: 4px 0 0 0;}
#intro-txt{ width:800px; height:300px;position:absolute; top:50%; left:50%; margin-left:-400px; margin-top:-120px; text-align:center; color:#fff;}
#footer-homepage {color:#fff; position: absolute; width: 100%; text-align:center; bottom:0;left:0;font-size:12px; padding-top:20px; padding-bottom:10px;}
#footer-homepage strong { font-size:16px;}
#logos{ margin-bottom:60px;}

/*Carousel About section */
.mycont{margin:-20px auto 0 auto;padding-top:50px;overflow:hidden;max-width: 930px; padding-bottom:15px;}
.mycarousel li { box-shadow: inset 0 0 0 5px rgba(200, 200, 200, 0.1), 0 0 5px 0 rgba(0, 0, 0, 0.35); padding: 0;width: 280px;margin: 15px; float:left; background:#fff; margin-bottom:10px; }
.ie8 .mycarousel li { border:1px solid #ededed; padding: 0;padding: 0;width: 280px;margin: 15px; float:left}
.jcarousel-clip{overflow: hidden;}
.jcarousel-prev,
.jcarousel-next{position: absolute;top: -36px;z-index: 99;display: block;width: 36px;height: 36px;opacity: 0.6;cursor: pointer;}
.jcarousel-prev{background: url(../images/carousel-prev.png) no-repeat left center;right: 60px;}
.jcarousel-next{background: url(../images/carousel-next.png) no-repeat left center;right: 15px;}
.jcarousel-next:hover{background: url(../images/carousel-next-2.png) no-repeat left center;}
.jcarousel-prev:hover {background: url(../images/carousel-prev-2.png) no-repeat left center;}

#main-facilties  span a{ display:block; padding:30px; text-align:center;  margin-bottom:10px; background: #f8f8f8 no-repeat top right;transition: background .6s ease; -moz-transition:background .6s ease; -webkit-transition:background .6s ease; -o-transition:background .6s ease;}
#main-facilties  span a:hover{ background:#e5f7f9 url(../images/plus_corner.png) no-repeat bottom right; }
#main-facilties .four.columns{ text-align:center; }

/* Testimonials sections*/
#testimonials {background: url(../images/bg-testimonials.png) repeat; position:relative; color:#fff; margin-bottom:30px;}
#testimonials ul li { padding:30px 30px 30px 110px; line-height:18px; text-align:left; background:url(../images/quote.png) 30px  center no-repeat; letter-spacing:0; font-size: 14px; text-shadow:none; }
#testimonials  cite{ font-weight: normal; font-style:italic; margin-top:15px; display: block;}
.qr_buttons { text-align:right; position:absolute; bottom:-50px; right:0; }
button.qr_previous, button.qr_next{ background: no-repeat 0 0; width:36px; height:36px; text-indent:-9999px; border:none; cursor:pointer; margin-top:10px; }
button.qr_previous{ background:url(../images/button-prev-quote.png); margin-right:5px; }
button.qr_next{ background: url(../images/button-next-quote.png);}

/*Rooms section*/
#rooms article { background-color:#fff; box-shadow: inset 0 0 0 5px rgba(200, 200, 200, 0.1), 0 0 5px 0 rgba(0, 0, 0, 0.35); margin: 0 10px 70px 10px; }
.ie8 #rooms article { background-color:#f8f8f8;  margin: 0 10px 80px 10px}
.info-box {padding:30px 30px 10px 30px;  background: #fffadd; box-shadow: inset 0 0 0 5px rgba(200, 200, 200, 0.1), 0 0 3px 0 rgba(0, 0, 0, 0.35); border:1px solid #fff; margin-bottom:15px;}

/*Prices stickers */
.price-green,.price-blue,.price-green-2,.price-aqua, .price-red {width:90px; height:60px; color:#fff; text-align:center; position:absolute; z-index:99; left:10px; bottom:-30px; display:block; font-weight:800; font-size:30px; padding-top:30px; background-color:#fff; }
.price-green small, .price-blue small, .price-aqua small, .price-green-2 small, .price-red small { font-size:22px;}
.price-green { background:url(../images/circle-green.png) no-repeat; }
.price-green em, .price-blue em, .price-green-2 em, .price-aqua em, .price-red em { font-size:13px;  font-style:normal; display:block;  font-weight:400;}
.price-blue { background: url(../images/circle-blue.png) no-repeat; }
.price-green-2 { background: url(../images/circle-green-2.png) no-repeat;}
.price-aqua {background: url(../images/circle-aqua.png) no-repeat;}
.price-red {background: url(../images/circle-red.png) no-repeat;}

/*Activities  section*/
#activities article { text-align:center; margin-top:-20px;  }
#activities figure { position:relative;}
#activities figure span { z-index:99; background:url(../images/frame-circular.png) center top no-repeat; position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:hidden;}

/*	Accordion used for tours */
.accordion{ width:97%; margin-top:5px; margin-bottom:20px}
.accordion dt a{display:block;font-size:16px;padding:5px 10px ; text-decoration:none;color: #333;background: #f5f5f5 url(../images/plus.png) no-repeat center right;line-height:32px; transition: background .5s ease;margin-bottom:5px; }
.accordion dt a:hover,  .accordion dt.active a{text-decoration:none;background:#39bad2 url(../images/plus.png) no-repeat center right;color:#fff;}
.accordion dd {display:none;padding:10px 10px 15px 10px;}

/*Fullscreen gallery*/
#close, .nav-gal { position:absolute; height:39px; width:39px; opacity:0.6; right:10px; }
#close { top:10px; background:url('../images/close_gallery.png'); }
.nav-gal { top:55px; background:url('../images/gallery_thumb.png'); }
#close:hover, .nav-gal:hover { cursor:pointer; opacity:1;}
ul#galleries { margin-top:30px;}
ul#galleries li { width:100%; height:60px; background-color:#000; opacity:0.8;margin-bottom:10px; }
ul#galleries li a { width:100%; height:60px; display:block; color:#fff; text-decoration:none}
ul#galleries li a:hover { background-color:#51a4c4;}
ul#galleries li figure { width:60px; height:60px; overflow:hidden; float:left; margin:7px 10px 0px 7px;}
ul#galleries li figure img { width:80px; height:auto;}
ul#galleries li figure desc { width:80px; height:auto;}
ul#galleries li h6 { padding-top:12px; font-weight:600; color:#fff }

/*Contacts */
#map {height:300px;width:100%;}

/* Table */ 
#rates tr:nth-of-type(odd){ background:#eee;}
#rates th{ background:#333 url(../img/bg_header.png) repeat-x; color:white; font-weight:bold;}
#rates td,#rates th{ padding:8px; text-align:left;}


/*  3. MISC
================================================== */
/* list bullets*/
ul.list_3{ margin:0; padding:0 0 15px 0;}
ul.list_3 li{background:url(../images/tick_1.png) no-repeat left 3px;line-height:18px;padding-left:20px; margin-bottom:6px;}

.spacer-2 { padding: 30px;}
.spacer-3 { padding: 30px 30px 35px 20px; }
.spacer p, .spacer-2 p { padding-bottom:0; margin-bottom:0; }
/*Hover image icon */
figure{ position:relative;}
.icon-hover{ background:url(../images/zoom_1.png) no-repeat 50% 50%; display:none; height:97%; left:0; position:absolute; top:0; width:100%; z-index:999;}

.gallery-bt{ display:inline-block; padding: 0 0 0 50px;}

/*Facilities icons */
ul.room_facilities{ padding: 5px 0 15px 0;}
ul.room_facilities li{ display:block; float:left; height:26px; margin:0 20px 20px 0; text-indent:-9999px; width:24px;}
ul.room_facilities li a{ cursor:pointer; display:block; height:26px; width:24px;}
ul.room_facilities li.lcd a{ background:url(../images/icons_room.png) no-repeat -1px 0;}
ul.room_facilities li.wifi a{ background:url(../images/icons_room.png) no-repeat -40px 0;}
ul.room_facilities li.safe a{ background:url(../images/icons_room.png) no-repeat -195px 0;}
ul.room_facilities li.bath a{ background:url(../images/icons_room.png) no-repeat -389px 0;}
ul.room_facilities li.loundry a{ background:url(../images/icons_room.png) no-repeat -234px 0;}
ul.room_facilities li.parking a{ background:url(../images/icons_room.png) no-repeat -466px 0;}
ul.room_facilities li.breakfast a{ background:url(../images/icons_room.png) no-repeat -117px 0;}
ul.room_facilities li.dinner a{ background:url(../images/icons_room.png) no-repeat -428px 0;}
ul.room_facilities li.air-warm a{ background:url(../images/icons_room.png) no-repeat -272px 0;}
ul.room_facilities li.air-cold a{ background:url(../images/icons_room.png) no-repeat -311px 0;}
ul.room_facilities li.swimming a{ background:url(../images/icons_room.png) no-repeat -350px 0;}
ul.room_facilities li.occupancy a{ background:url(../images/icons_room.png) no-repeat -78px 0;}
ul.room_facilities li.pet a{ background:url(../images/icons_room.png) no-repeat -156px 0;}

/*	Reveal Modals */
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,.6); z-index: 100; display: none; top: 0; left: 0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  filter: alpha(opacity=60);}
.reveal-modal {visibility: hidden; top: 20%;  left: 50%; width: 400px; margin-left: -200px;  position: absolute;z-index: 101;}
.reveal-modal .close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa;text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold;cursor: pointer;} 
/* NOTES Close button entity is &#215; */

/*  4. MEDIA QUERIES (responsive styles)
================================================== */

/* Tablet Portrait size to standard 960 (devices and browsers) ================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
#intro-txt{ width:600px; height:280px; margin-left:-300px; margin-top:-120px;  }
.mycont{padding-top:50px;max-width: 760px; overflow:hidden}
.mycarousel li {width: 350px;margin: 15px; float:left}
#activities figure span { z-index:99; background:url(../images/frame-circular-2.png) center center no-repeat; position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:hidden;}
.accordion{ width:100%;}
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
header { position:relative;}
header .container .four.columns { float:left; width:200px;}
header .container .twelve.columns {width: 50px; float:right;}
#logos { display:none; }

#rooms, #contact, #about{ padding-bottom:20px;}
#activities { padding-bottom:10px;}

#top-nav #lang ul{float: none; border:none;  height:18px; position:absolute; top:-10px; right:55px;}	
#top-nav #lang ul li{ display:inline-block;border:none; float:none; }	

#top-nav		{width:100%;float:left; display:none; }
#top-nav ul	{float: none; padding:20px 0 15px 0; margin:0;}
#top-nav ul li:first-child 	{border-top:none;}
#top-nav ul li 	{float: none; border-top: 1px solid #ddd; font-size:14px; padding:0; margin:0; display:block}
#top-nav ul li a	{ display:block; padding:8px 0 8px 9px;}
#top-nav ul li a:hover{ background-color:#ededed;}
#top-nav a#homepage-bt { text-indent:0px; width:auto; background:none;}
.btn-responsive-menu{display:block;}	

#intro-txt{ width:320px;  margin-left:-160px; margin-top:-40px;  }
.mycont{overflow:hidden;max-width: 380px;}
.mycarousel li { padding: 0;padding: 0;width: 350px;margin: 15px; float:left}
.reveal-modal {width: 300px; margin-left: -140px; }
#main-facilties span {display: block; }
#map {height:250px;width:100%;}
#rooms article { margin: 0 0px 50px 0px}
#testimonials ul li { padding:15px 15px 15px 100px; }
.reveal-modal { top: 8%; }

.gallery-bt{ display:block; padding: 0; text-align:center; margin-bottom:20px;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
header { position:relative;}
header .container .four.columns {width: 200px; float:left;}
header .container .twelve.columns {width: 50px; float:right;}
#logos { display:none; }

#rooms, #contact, #about{ padding-bottom:20px;}
#activities { padding-bottom:10px;}

#top-nav #lang ul{float: none; border:none;  height:18px; position:absolute; top:-10px; right:40px;}	
#top-nav #lang ul li{ display:inline-block;border:none; float:none; }	

#top-nav		{width:100%;float:left;}
#top-nav			{display:none;}
#top-nav ul	{float: none; padding:20px 0 15px 0; margin:0;}
#top-nav ul li 	{float: none; border-top: 1px solid #ddd; font-size:14px; padding:0; margin:0; display:block}
#top-nav ul li a	{ display:block; padding:5px;}
#top-nav ul li a:hover{ background-color:#ededed;}
#top-nav a#homepage-bt { display:none;}
.btn-responsive-menu{display:block;}	

#map {height:250px;width:100%;}

#intro-txt{ width:260px; height:130px; margin-left:-130px; margin-top:-30px;  }
.mycont{padding-top:38px;overflow:hidden;max-width: 380px;}
.mycarousel li {padding: 0;width: 280px;margin: 10px; float:left}
.reveal-modal {width: 300px; margin-left: -150px; }
#testimonials ul li { padding:15px 15px 15px 100px; }
#main-facilties span {display: block; }
.accordion{ width:100%;}
#rooms .container { padding-top:15px;}
#rooms article { margin: 0 0px 50px 0px}
.reveal-modal {width: 260px; margin-left: -130px; top:8%; }
.gallery-bt{ display:block; padding: 0; text-align:center; margin-bottom:20px;}
	
/* Force table to not be like tables anymore */
		table #rates,#rates thead,#rates  tbody,#rates th, #rates td, #rates tr {display: block; }
		
		/* Hide table headers (but not display: none;, for accessibility) */
		#rates thead tr { position: absolute;top: -9999px;left: -9999px;}
		
		#rates tr { border: 1px solid #ccc; }
		
		#rates td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 70%; 
		}
		
		#rates td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/
		#rates td:nth-of-type(1):before { content: "Room Type"; }
		#rates td:nth-of-type(2):before { content: "Low from 23/03 to 31/05"; }
		#rates td:nth-of-type(3):before { content: "Middle from 23/03 to 31/05"; }
		#rates td:nth-of-type(4):before { content: "High from 23/03 to 31/05"; }

}




